<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏(2个切换)</button>
    <!--
       使用animate.css第三方动画
       npm install animate.css

       name指定为第三方样式
       enter-active-class指定为进入的动画样式
       leave-active-class指定为离开的动画样式
    -->
    <transition-group 
        name="animate__animated animate__bounce" 
        appear
        enter-active-class="animate__swing"
        leave-active-class="animate__backOutUp"
        > 
        <h1 v-show="isShow" key="1">你好啊！过渡1</h1>
        <h1 v-show="!isShow" key="2">你好啊！过渡2</h1>
    </transition-group>
  </div>
</template>

<script>
import 'animate.css' //引入第三方动画
export default {
    name: 'Test',
    data() {
        return {
            isShow: true
        }
    }
}
</script>

<style scoped>
    h1 {
        background-color: orange;
    }
</style>